<template>
  <!-- 系统信息卡片 -->
  <el-card class="system-card" shadow="never">
    <template #header>
      <div class="card-header">
        <el-icon><Monitor /></el-icon>
        <span class="card-title-text">系统信息</span>
        <el-tooltip :content="system.hostName" placement="top" effect="dark" :offset="8">
          <el-icon class="header-icon"><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
    </template>
    <div class="info-list">
      <div class="info-item">
        <div class="info-label">操作系统</div>
        <el-tooltip :content="system.osName" placement="top" effect="dark" :offset="8">
          <div class="info-value" :title="system.osName">{{ system.osName }}</div>
        </el-tooltip>
      </div>
      <div class="info-item">
        <div class="info-label">系统架构</div>
        <div class="info-value">{{ system.osArch }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ElCard, ElIcon, ElTooltip } from 'element-plus'
import { Monitor, InfoFilled } from '@element-plus/icons-vue'

/**
 * 定义组件的 props
 * @param {Object} system - 包含系统信息的对象
 */
defineProps({
  system: {
    type: Object,
    required: true,
    default: () => ({}),
  },
})
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixins.scss' as *;

.card-header {
  @include flex($align: center);
  font-weight: 500;

  .card-title-text {
    margin: 0 4px 0 8px;
  }

  .header-icon {
    color: var(--el-text-color-secondary);
    cursor: help;
    &:hover {
      color: var(--el-text-color-primary);
    }
  }
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  @include flex-between;

  .info-label {
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }

  .info-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    font-family: 'Courier New', Courier, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
}
</style>
